
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<div id="alert"></div>
<div id="addDepList"></div>
<div class="row">

    <div class="col-lg-12 col-md-12 col-sm-12 ">
        <form class="form-inline" role="form" id="selectUserVal">
            <div class="row">
                <div class="form-group inputselect col-lg-4">
                    <label for="name">部门编号</label> <input type="text"class="form-control"
                            id="dept" name="dept"placeholder="部门编号">
                </div>
                <div class="form-group inputselect col-lg-4">
                    <button type="button" class="btn btn-success btn-sm "id="selectByVal">
                        <span class="glyphicon glyphicon-user"></span> 搜索
                    </button>
                </div>
            </div>
        </form>
        <form class="form-inline" role="form"></form>
        <div class="table-responsive " style="margin-left: 3%; font-size:8px;" >
            <table class="table table-hover tablefont" style="font-size:12px;">
                <tbody id="tableList" >

                </tbody>
            </table>
            <div style="bottom: 10%">


            </div>


        </div>

    </div>
</div>
<div id="paging" style="text-align: center;display: inline-block;">
    <div id="main4" style="float:left;width: 600px;height:330px;"></div>
    <div id="main3" style="float:left;width: 600px;height:330px;"></div>
    <div id="main0" style="float:left;width: 600px;height:330px;"></div>
    <div id="main1" style="float:left;width: 600px;height:330px;"></div>
    <div id="main2" style="float:left;width: 600px;height:330px;"></div>
</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例

    var option1 = {
        title: {
            text: '全体员工男女比例'
        },
        series :
            {
                name: '男女比例',
                type: 'pie',
                radius: '75%',
                data:[
                    {value:235, name:'男'+'235'},
                    {value:274, name:'女'+'274'},
                ]
            }

    };

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '全体员工岗位统计'
        },
        tooltip: {},
        legend: {
            data:['人数']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: {
            name: '人数',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }

    }

    $.ajax({
        url : "${pageContext.request.contextPath}/userC",
        type : "GET",
        data : "dept=0000",
        contentType : "application/json;charset=utf-8",
        success : function(msg) {
            for (var i=0;i<=2;i++){
                option.title.text=msg[i].title;
                option.xAxis.data = msg[i].aa;
                option.series.data = msg[i].bb;
                var myChart = echarts.init(document.getElementById('main'+i));
                myChart.setOption(option);
            }
            option1.title.text=msg[3].title;
            option1.series.data = msg[3].data;
            var myChart4 = echarts.init(document.getElementById('main'+3));

            myChart4.setOption(option1);
            option.title.text=msg[4].title;
            option.xAxis.data = msg[4].aa;
            option.series.data = msg[4].bb;
            var myChart = echarts.init(document.getElementById('main'+4));
            myChart.setOption(option);
        },
        error : function(e) {
            alert("失败");
        }
    })


    $("#selectByVal").click(function() {
        var dept =$("#dept").val();
        $.ajax({
            url : "${pageContext.request.contextPath}/userC",
            type : "GET",
            data : "dept="+dept,
            contentType : "application/json;charset=utf-8",
            success : function(msg) {
                for (var i=0;i<=2;i++){
                    option.title.text=msg[i].title;
                    option.xAxis.data = msg[i].aa;
                    option.series.data = msg[i].bb;
                    var myChart = echarts.init(document.getElementById('main'+i));
                    myChart.setOption(option);
                }
                option1.title.text=msg[3].title;
                option1.series.data = msg[3].data;
                var myChart4 = echarts.init(document.getElementById('main'+3));
                myChart4.setOption(option1);
            },
            error : function(e) {
                alert("失败");
            }
        })
    });




</script>
</body>

</body>
</html>
